<template>
	<view class="information-list">

		<view class="page-title">
			<!-- <image src="../../static/back.png" class="back" :style="{'marginTop':height-10+'px'}" @click="handleBack">
			</image> -->
			<view>
				<!-- <view class="pt-text">已有{{detail.collection_num}}人领取</view> -->
				<image src="../../static/file.png" class="file"></image>
			</view>

		</view>
		<view class="content">
			<scroll-view scroll-y="true" class="scroll-content" @scrolltoupper="upper">
				<view class="list" @click="toDetail">
					<view>
						<view class="list-box f ai-c jc-s-b">
							<image :src="detail.image" class="poster"></image>
							<view class="info f fd-c f1">
								<view class="title">
									{{detail.title}}
								</view>
								<view class="f ai-c jc-s-b browse">
									<view>{{detail.read_num}}人浏览</view>
								</view>
							</view>
						</view>

					</view>

				</view>
			</scroll-view>
		</view>
		<!-- <view class="btn-box">
			<view @click="handleCollect" >{{detail.is_collection?'已领取':'立即领取'}}</view>
		</view> -->
		<!-- 遮罩层 -->
		<view class="shade" v-show="shareType=='pyq'" @click="shareType=''">
			<!-- <image src="../../static/jt-z.png" class="jt-z" @click.stop="handleBack"></image> -->
			<view class="share">
				<image src="../../static/jt-s.png"></image>
				请点击右上角分享到朋友圈
			</view>
		</view>
	</view>
</template>

<script>
	import {
		databaseInfo,
		shareInfo,
		collectionDatabase,
		collectionDatabaseSet
	} from '@/api/index.js'
	export default {

		data() {
			return {
				height: 0,
				shareType: '',
				info_id: null,
				database_type: '', //1是资料 2是集合
				detail: ''
			}
		},
		computed: {
			token() {
				return this.$store.state.token
			},
		
		},
		onLoad(options) {					
			//#ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			//#endif		
			this.shareType = options.shareType
			this.info_id = options.id
			this.database_type = options.database_type
			this.getDetail()
		},
		onReady() {
			uni.getSystemInfo({
				success: (e) => {
					this.tops = e.statusBarHeight;
					let custom = uni.getMenuButtonBoundingClientRect();
					this.height = custom.top;
					console.log(custom, '高度')

				}

			})

		},
		onShareTimeline() {
			return {
				title: this.detail.title, // 分享的标题
				query: `id=${this.info_id}&shareType=friend&database_type=${this.database_type}`, // 分享的查询参数，可选
				imageUrl: this.detail.image, // 分享卡片的图片，可选
				path: '/pages/share/share' // 分享的路径，必须在pages.json中注册
			};
		},
		methods: {		
			//pdf详情
			toDetail(data) {
				this.detail.read_num=this.detail.read_num+1
				if(this.database_type==1){				
				uni.navigateTo({
					url: `/pages/pdf/pdf?id=${this.detail.id}`
				})
				}else{
					uni.navigateTo({
						url: `/pages/information/list?id=${this.detail.id}`
					})
				}
			},
			//领取
			async handleCollect() {
				if(!this.token){
					uni.showToast({
						title:'请前往小程序使用完整服务',
						icon:'none'
					})
					return
				}
				if (!this.detail.is_collection) {
					if(this.database_type==1){
						await collectionDatabase({
							database_id: this.info_id,
							title: this.detail.title
						})
					}else{
						await collectionDatabaseSet({
							set_id: this.info_id,
							title: this.detail.title
						})
					}
					
					this.detail.is_collection = true
				}

				uni.showModal({
					title: '',
					content: '领取成功，已经添加到默认收藏夹',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			async getDetail() {
				if(!this.token){				
					const {
						data
					} = await shareInfo({
						info_id: this.info_id,
						type: this.database_type
					})
					this.detail = data
				}else{
					const {
						data
					} = await databaseInfo({
						info_id: this.info_id,
						type: this.database_type
					})
					this.detail = data
				}
				
			},
			handleBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss" s>
	.information-list {
		background: #e6f1fa;

		.shade {
			background: rgba(0, 0, 0, 0.5);
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			top: 0;

			.jt-z {
				position: absolute;
				width: 50rpx;
				height: 50rpx;
				left: 32rpx;
				top: 80rpx;
			}

			.share {
				position: absolute;
				right: 82rpx;
				top: 40rpx;
				font-size: 26rpx;
				background: #fff;
				width: 340rpx;
				border-radius: 12rpx;
				height: 55rpx;
				text-align: center;
				line-height: 55rpx;

				image {
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					top: -20rpx;
					right: 50rpx;
				}
			}
		}

		.btn-box {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			height: 180rpx;
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #bde1f2);

			view {
				width: 650rpx;
				height: 85rpx;
				background: linear-gradient(to right, #eec25b, #f7e7ad);
				border-radius: 40rpx;
				margin: 40rpx auto;
				text-align: center;
				line-height: 85rpx;
				color: #fff;
				font-size: 32rpx;
				letter-spacing: 4rpx;
				font-weight: 800;
			}
		}

		.content {
			min-height: 77vh;
			background: linear-gradient(to bottom, #edf3fb, #e6f1fa);
			border-radius: 40rpx 40rpx 0 0;
			margin-top: -80rpx;
			position: relative;
			padding-top: 16rpx;
			padding-bottom: 100rpx;
			box-sizing: border-box;
			padding-bottom: 100rpx;

			.scroll-content {
				height: calc(100vh - 100px);

			}

			.list {
				width: 710rpx;
				margin: auto;



				.list-box {
					background: #fff;
					border-radius: 24rpx;
					padding: 24rpx;
					box-sizing: border-box;
					margin-bottom: 16rpx;

					.info {
						.browse {
							color: #999999;
							font-size: 24rpx;
							margin-top: 40rpx;

							.collect {
								width: 30rpx;
								height: 30rpx;
								margin-right: 16rpx;
							}


						}

						.title {
							display: -webkit-box;
							-webkit-line-clamp: 3;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 28rpx;
							font-weight: 700;
						}

						.recommend {
							background: linear-gradient(to right, #36c684, #03c9ba);
							width: 80rpx;
							height: 35rpx;
							color: #fff;
							font-size: 24rpx;
							border-radius: 8rpx;
							display: inline-block;
							text-align: center;
							margin-right: 8rpx;
							line-height: 35rpx;
							font-weight: 800;
						}
					}



					.poster {
						width: 170rpx;
						height: 210rpx;
						margin-right: 16rpx;
					}
				}
			}

		}

		.page-title {
			background: #4281f5;
			height: 400rpx;
			width: 100%;
			position: relative;
			padding: 32rpx;
			box-sizing: border-box;

			.back {
				width: 45rpx;
				height: 45rpx;
			}

			.pt-text {
				font-size: 32rpx;
				color: #fff;
				width: 60%;
				margin-top: 30rpx;
				line-height: 50rpx;
			}

			.file {
				position: absolute;
				width: 340rpx;
				height: 340rpx;
				right: 30rpx;
				top: 60rpx;
			}
		}
	}
</style>